<div class="relative flex flex-col w-full sm:w-auto js-actions-dropdown"
  data-component-name="<%= self.class.to_s.underscore %>"
  data-controller="toggle actions-picker"
  data-actions-picker-enabled-class="text-black hover:bg-primary-500 hover:text-white"
  data-actions-picker-disabled-class="cursor-wait text-gray-500"
  data-resource-name="<%= @resource.class.to_s %>"
  <% if @resource.record.present? %> data-record-id="<%= @resource.record_param %>" <% end %>
>
  <%= a_button style: @style,
    type: :button,
    color: @color,
    size: @size,
    class: "focus:outline-none",
    icon: @icon,
    icon_class: @icon_class,
    data: {
      action: "click->toggle#togglePanel",
      actions_dropdown_button: @resource.model_key,
      tippy: "tooltip",
      tippy_content: @title
    } do %>
    <%= @label %>
  <% end %>
  <div
    class="absolute flex inset-auto xl:right-0 top-full bg-white w-full sm:w-auto sm:min-w-[300px] mt-2 z-40 shadow-modal rounded overflow-hidden hidden"
    data-toggle-target="panel"
    data-controller="actions-overflow"
    data-actions-overflow-panel-list-value="<%= !@as_row_control %>"
    data-actions-overflow-target="content"
    data-transition-enter="transition ease-out duration-100"
    data-transition-enter-start="transform opacity-0 -translate-y-1"
    data-transition-enter-end="transform opacity-100 translate-y-0"
    data-transition-leave="transition ease-in duration-75"
    data-transition-leave-start="transform opacity-100 translate-y-0"
    data-transition-leave-end="transform opacity-0 -translate-y-1"
  >
    <div data-target="actions-list" class="w-full space divide-y">
      <% @actions.each do |action| %>
        <%= render_item(action)%>
      <% end %>
    </div>
  </div>
</div>
